import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Child = ({ count }) => {
  useEffect(() => {
    console.log('子 init & update');
    return () => {
      // 只要依赖发生变化就执行清除副作用，依赖是空的时候，只有组件卸载了才会执行
      console.log('子组件卸载');
    };
  }, [count]);

  return <div>我是子组件{count}</div>;
};

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('父 init & update');
    return () => {
      // 只要依赖发生变化就执行清除副作用，依赖是空的时候，只有组件卸载了才会执行
      console.log('父组件卸载');
    };
  }, [count]);

  return [
    <div key="1">我是父组件{count}</div>,
    <button key="2" onClick={() => setCount((c) => ++c)}>
      点击
    </button>,
    <Child key="3" count={count} />,
  ];
}

// 父子组件useEffect执行顺序：
// 初始化阶段：(子 init & update) -> (父 init & update)
// 更新阶段：（子组件卸载）-> (子 init & update) -> (父组件卸载) -> (父 init & update)
// 卸载阶段：父子（只要依赖发生变化就执行清除副作用，依赖是空的时候，只有组件卸载了才会执行）

ReactDOM.render(<App />, document.getElementById('root'));
